// import React, { Component } from 'react'

// export default class PureComponent extends Component {

//   constructor() {
//     super();
//     this.state = {
//       counter: 1
//     }
//   }
//   render() {
//     console.log("App 渲染了");
//     return (
//       <div>
//         <h1>App 组件PureComponent</h1>
//         <div>{this.state.counter}</div>
//         <button onClick={() => this.setState({
//           counter : 1
//         })}>+1</button>
//       </div>
//     )
//   }
// }


import React, { Component } from 'react'
// import { objectEqual } from "./utils/tools"

export default class PureComponent extends Component {

  constructor() {
    super();
    this.state = {
      counter: 1
    }
  }

  /**
   * 
   * @param {*} nextProps 新的 props
   * @param {*} nextState 新的 state
   * @returns 
   */
  shouldComponentUpdate(nextProps, nextState) {
    // shouldComponentUpdate会根据返回值来决定是否重新渲染
    // 默认是 true，要重新渲染
    // 如果返回 false，则不会重新渲染
    // 我们就需要将当前的 props 和 state 与新的 props 和 state 进行一个比较
    // if (objectEqual(this.props, nextProps) && objectEqual(this.state, nextState)) {
    //   // 如果新旧 props 和 state 都是相同的，那么就返回 false，不需要重新渲染
    //   return false;
    // }
    return false;
  }

  render() {
    console.log("App 渲染了");
    return (
      <div>
      <h2>PureComponent测试</h2>
        <div>PureComponent 组件</div>
        <div>{this.state.counter}</div>
        <button onClick={() => this.setState({
          counter: Math.floor(Math.random() * 3 + 1)
        })}>+1</button>
      </div>
    )
  }
}